<div class="layui-fluid" id="VIEW-list-table" lay-title="我的客户">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">筛选数据</div>
                <div class="layui-card-body">
                    <form class="layui-form" method="get" lay-filter="lig-myCustomer-searchform">
                        <input type="hidden" name="status">
                        <div class="layui-inline">
                            <label class="layui-form-label">公司</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="name" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">法人</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="legal" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">手机号</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="telNumber" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width:20px;"></label>
                            <div class="layui-input-inline">
                                <input type="button" class="layui-btn layui-btn-sm" lay-filter="lig-myCustomer-search" value="&nbsp;查&nbsp;询&nbsp;"></input>
                                <input type="reset" class="layui-btn layui-btn-sm layui-btn-primary" value=" 重 置 ">
                                <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" lay-filter="lig-myCustomer-excel">
                                    <i class="layui-icon layui-icon-export"></i> 导 出 
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-body nepadmin-table-full">
                    <div class="layui-tab layui-tab-brief" lay-filter="lig-myCustomer-status-tab">
                        <ul class="layui-tab-title">
                        </ul>
                    </div>

                    <!--<div class="layui-btn-container nepadmin-pad-t10 nepadmin-pad-l10">
                        <div class="layui-btn layui-btn-sm" lay-filter="lig-myCustomer-add">添加客户</div>
                    </div>-->
                    <table lay-filter="lig-myCustomer-table"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="tpl-myCustomer-table-row-toolBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="lig-detail" title="详情">详情</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="lig-modify" title="编辑">编辑</a>
</script>
<script type="text/html" id="tpl-myCustomer-add">
    <div class="layui-form" style="padding: 20px 20px 0 0;" lay-filter="lig-saveForm">
        <div class="layui-form-item">
            <label class="layui-form-label ligui-form-item-required">状态</label>
            <div class="layui-input-block">
                <select name="status" lay-verify="required">
                    <option value=""></option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ligui-form-item-required">公司</label>
            <div class="layui-input-block">
                <input type="text" name="name" autocomplete="off" class="layui-input"
                       placeholder="客户名称" value='' lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label ligui-form-item-required">法人</label>
                <div class="layui-input-block">
                    <input type="text" name="legal" autocomplete="off" class="layui-input"
                           value="" lay-verify="required">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">微信</label>
                <div class="layui-input-block">
                    <input type="text" name="wxNumber" autocomplete="off" class="layui-input"
                           value="">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-bottom:0px;">
            <label class="layui-form-label">联系电话</label>
            <div class="layui-input-block">
                <span style="height: 34px;line-height: 34px;">
                    <i class="layui-icon layui-icon-add-circle" lay-filter="lig-myCustomer-tel-add" style="font-size: 24px; cursor: pointer;"></i>
                </span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <table class="layui-table" lay-skin="nob" lay-size="sm" style="border:0;">
                    <colgroup>
                        <col width="100">
                        <col width="100">
                        <col width="50">
                    </colgroup>
                    <tbody class="myCustomer-tels">
                    <tr>
                        <td style="padding-left:0;">
                            <input type="text" name="telNumber" autocomplete="off" class="layui-input"
                                   value="" style="height:28px;line-height:28px;">
                        </td>
                        <td style="text-align:right;" class="col-opt">
                            <input type="hidden" name="isLegal" value="0"/>
                            <a href="javascript:;" lay-filter="lig-setLegalTel">设置为法人电话</a>
                        </td>
                        <td style="text-align:right;">
                            <a href="javascript:;" lay-filter="lig-delTel">删除</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="remark" class="layui-textarea" style="height:180px;line-height:20px;"></textarea>
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="tpl-myCustomer-modify">
    <div class="layui-form" style="padding: 20px 20px 0 0;" lay-filter="lig-saveForm">
        <input type="hidden" name="id" value="{{d.id}}"/>
        <div class="layui-form-item">
            <label class="layui-form-label ligui-form-item-required">状态</label>
            <div class="layui-input-block">
                <select name="status" lay-verify="required" lay-data="{{d.status}}">
                    <option value=""></option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">公司</label>
            <div class="layui-input-block">
                <input type="text" name="name" autocomplete="off" class="layui-input layui-disabled" readonly 
                       value="{{d.name}}">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">法人</label>
                <div class="layui-input-inline">
                    <input type="text" name="legal" autocomplete="off" class="layui-input layui-disabled" readonly 
                           value="{{d.legal}}">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">微信</label>
                <div class="layui-input-inline">
                    <input type="radio" name="wxNumber" value="加" title="加" {{# if (d.wxNumber == '加') { }} checked {{# } }}>
                    <input type="radio" name="wxNumber" value="是" title="是" {{# if (d.wxNumber == '是') { }} checked {{# } }}>
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-bottom:0px;">
            <label class="layui-form-label">联系电话</label>
            <div class="layui-input-block">
                <span style="height: 34px;line-height: 34px;">
<!--                    <i class="layui-icon layui-icon-add-circle" lay-filter="lig-myCustomer-tel-add" style="font-size: 24px; cursor: pointer;"></i>-->
                </span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <table class="layui-table" lay-skin="nob" lay-size="sm" style="border:0;">
                    <colgroup>
                        <col width="70">
                        <col width="100">
                        <col width="50">
                    </colgroup>
                    <tbody class="myCustomer-tels">
                    {{# layui.each(d.tels, function(i, it){ }}
                    <tr>
                        <td style="padding-left:0;">
                            <input type="text" name="telNumber" autocomplete="off" class="layui-input layui-disabled"
                                   value="{{it.telNumber}}" style="height:28px;line-height:28px;" disabled>
                        </td>
                        <td style="text-align:right;" class="col-opt">
                            {{#
                            if (it.isLegal == 1) {
                            }}
                            <input type="hidden" name="isLegal" value="1"/>
                            <a href="javascript:;" class="layui-badge layui-bg-green" lay-filter="lig-cancelLegalTel" title="点击取消">
                                法人电话
                            </a>
                            {{# } else { }}
                            <input type="hidden" name="isLegal" value="0"/>
                            <a href="javascript:;" lay-filter="lig-setLegalTel">设置为法人电话</a>
                            {{# } }}
                        </td>
                        <td style="text-align:right;">
                            {{#
                            if (it.isInvalid == 1) {
                            }}
                            <input type="hidden" name="isInvalid" value="1"/>
                            <a href="javascript:;" class="layui-badge layui-bg-blue" lay-filter="lig-waitingTel" title="点击取消">待确</a>
                            {{# } else { }}
                            <input type="hidden" name="isInvalid" value="0"/>
                            <a href="javascript:;" lay-filter="lig-waitTel">待确</a>
                            {{# } }}
                        </td>
                    </tr>
                    {{#  }); }}
                    </tbody>
                </table>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">待跟进时间</label>
            <div class="layui-input-inline">
              <input type="text" name="followTime" autocomplete="off" class="layui-input {{ d.followTime || 'layui-disabled' }} " value="{{layui.lig.toDateString(d.followTime, 'yyyy-MM-dd') }}" {{ d.followTime || 'disabled' }}>
            </div>
            <div class="layui-form-mid layui-opt-aux" style="margin-left:6px;">
                <input type="checkbox" name="notFollow" lay-skin="primary" title="不跟进" {{ d.followTime || 'checked' }}  lay-filter="lig-notFollow">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="remark" class="layui-textarea" style="height:180px;line-height:20px;">{{d.remark}}</textarea>
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="tpl-myCustomer-detail">
    <span class="layui-layer-setwin"><a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;"></a></span>
    <form class="layui-form" style="padding-top: 40px;" lay-filter="lig-detailForm">
        <input type="hidden" name="id" value="{{d.id}}"/>
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">基本信息</h2>
                <div class="layui-colla-content layui-show">
                    <div class="layui-form-item" style="margin-bottom:0;">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width:70px;">公司：</label>
                            <div class="layui-input-inline" style="width:280px;">
                                <span style="height: 30px; line-height: 30px;color: #999!important;">{{d.name}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item" style="margin-bottom:0;">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width:70px;">区域：</label>
                            <div class="layui-input-inline" style="width:140px;">
                                <span style="height: 30px; line-height: 30px;color: #999!important;">{{d.area}}</span>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width:70px;">行业：</label>
                            <div class="layui-input-inline" style="width:140px;">
                                <span style="height: 30px; line-height: 30px;color: #999!important;">{{d.industry}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item" style="margin-bottom:0;">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width:70px;">法人：</label>
                            <div class="layui-input-inline" style="width:140px;">
                                <span style="height: 30px; line-height: 30px;color: #999!important;">{{d.legal}}</span>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width:70px;">微信：</label>
                            <div class="layui-input-inline" style="width:140px;">
                                <span style="height: 30px; line-height: 30px;color: #999!important;">{{d.wxNumber}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item" style="margin-bottom:0;">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width:70px;">业务员：</label>
                            <div class="layui-input-inline" style="width:140px;">
                                <span style="height: 30px; line-height: 30px;color: #999!important;">{{d.salesName}}</span>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width:70px;">状态：</label>
                            <div class="layui-input-inline" style="width:140px;">
                                <span style="height: 30px; line-height: 30px;color: #999!important;">{{d.statusName}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item" style="margin-bottom:0;">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width:70px;">更新时间：</label>
                            <div class="layui-input-inline" style="width:140px;">
                                <span style="height: 30px; line-height: 30px;color: #999!important;">{{layui.util.toDateString(d.modifiedTime, "yyyy-MM-dd HH:mm:ss") }}</span>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width:70px;">入库时间：</label>
                            <div class="layui-input-inline" style="width:140px;">
                                <span style="height: 30px; line-height: 30px;color: #999!important;">{{layui.util.toDateString(d.createdTime, "yyyy-MM-dd HH:mm:ss") }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item" style="margin-bottom:0;">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width:70px;">电话：</label>
                        </div>
                    </div>
                    <div class="layui-form-item" style="margin-bottom:0;">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width:50px;"></label>
                            <div class="layui-input-block">
                                <table class="layui-table" lay-skin="line" lay-size="sm" style="border:0;">
                                    <colgroup>
                                        <col width="150">
                                        <col width="150">
                                    </colgroup>
                                    <tbody>
                                    {{# layui.each(d.tels, function(i, it){ }}
                                    <tr lay-data="{{it.id}}">
                                        <td>{{ it.telNumber }}</td>
                                        <td style="text-align:right;" class="col-opt">
                                            {{#
                                            if (it.isLegal == 1) {
                                            }}
                                            <span class="layui-badge layui-bg-green">法人电话</span>
                                            {{# } }}
                                        </td>
                                    </tr>
                                    {{#  }); }}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">备注</h2>
                <div class="layui-colla-content layui-show" style="padding:0;">
                    <textarea name="remark" class="layui-textarea" disabled style="height:150px;line-height:20px;">{{d.remark}}</textarea>
                </div>
            </div>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">申贷记录</h2>
                <div class="layui-colla-content layui-show"></div>
            </div>
        </div>

    </form>
</script>
<script type="text/html" id="tpl-myCustomer-tel">
    <tr>
        <td style="padding-left:0;">
            <input type="text" name="telNumber" autocomplete="off" class="layui-input" value=""
                   style="height:28px;line-height:28px;">
        </td>
        <td style="text-align:right;" class="col-opt">
            <input type="hidden" name="isLegal" value="0"/>
            <a href="javascript:;" lay-filter="lig-setLegalTel">设置为法人电话</a>
        </td>
        <td style="text-align:right;"><a href="javascript:;" lay-filter="lig-delTel">删除</a></td>
    </tr>
</script>
<script>
    layui.use(['form', 'element', 'laytpl', 'layer', 'laydate', 'jquery','lig'], function (form, element, laytpl, layer, laydate, $, lig) {
        var initStatus;
        var setLegalStatus = function() {
            var length = $('.myCustomer-tels').find('[lay-filter="lig-cancelLegalTel"]').length, $status = $('[lay-filter="lig-saveForm"] select[name="status"]');
            if (length > 0) {
                form.val("lig-saveForm", {status: '01001'});
            } else {
                form.val("lig-saveForm", {status: initStatus});
            }
            form.render("select");
        };

        var renderSetLegalTel = function() { 
            $('[lay-filter="lig-setLegalTel"]').click(function () {
                var $this = $(this), $td = $this.parent();
                //$this.closest('tbody').find('.col-opt').html('<input type="hidden" name="isLegal" value="0"/><a href="javascript:;" lay-filter="lig-setLegalTel">设置为法人电话</a>');
                $td.html('<input type="hidden" name="isLegal" value="1"/><a href="javascript:;" class="layui-badge layui-bg-green" lay-filter="lig-cancelLegalTel" title="点击取消">法人电话</a>');
                $td.next().html('<input type="hidden" name="isInvalid" value="0"/><a href="javascript:;" lay-filter="lig-waitTel">待确</a>');
                renderCancelLegalTel();
                renderWaitTel();

                setLegalStatus();
            });
        };

        var renderCancelLegalTel = function() {
            $('[lay-filter="lig-cancelLegalTel"]').click(function () {
                var $this = $(this), id = $this.closest('tr').attr('lay-data'), $td = $this.parent();
                $td.html('<input type="hidden" name="isLegal" value="0"/><a href="javascript:;" lay-filter="lig-setLegalTel">设置为法人电话</a>');
                renderSetLegalTel();

                setLegalStatus();
            });
        };

        var renderDelTel = function() {
            $('[lay-filter="lig-delTel"]').click(function () {
                $(this).closest('tr').remove();
            });
        };

        var renderWaitTel = function () {
            $('[lay-filter="lig-waitTel"]').click(function () {
                var $this = $(this), $td = $this.parent();
                $td.html('<input type="hidden" name="isInvalid" value="1"/><a href="javascript:;" class="layui-badge layui-bg-blue" lay-filter="lig-waitingTel" title="点击取消">待确</a>');
                $td.prev().html('<input type="hidden" name="isLegal" value="0"/><a href="javascript:;" lay-filter="lig-setLegalTel">设置为法人电话</a>');
                renderWaitingTel();
                renderSetLegalTel();
            });
        }

        var renderWaitingTel = function () {
            $('[lay-filter="lig-waitingTel"]').click(function () {
                var $this = $(this), $td = $this.parent();
                $td.html('<a href="javascript:;" lay-filter="lig-waitTel">待确</a>');
                renderWaitTel();
            });
        }

        var renderAddTel = function () {
            $('.myCustomer-tels').append($('#tpl-myCustomer-tel').html());
            renderSetLegalTel();
            renderDelTel();
        };

        var tableDone = function(res, curr, count) {
            if (res.items && res.items.length > 0) {
                var items = res.items;
                $('div[lay-id="myCustomerId"]').find('a[lay-event="lig-detail"]').mouseover(function() {
                    var index = $(this).closest('tr').attr('data-index'), it = items[index], id = it.id;
                    lig.ajaxget({
                        url: 'bu/customer/' + id,
                        success: function(ressult) {
                            laytpl($('#tpl-myCustomer-detail').html()).render(ressult.data, function (html) {
                                layer.open({
                                    type: 1,
                                    title: false,
                                    content: html,
                                    closeBtn: 0,
                                    area: ['40%', '100%'],
                                    offset: 'auto',
                                    shadeClose: true,
                                    success: function(layero){
                                        layero.css({'left': 'auto','right': '0'});
                                        element.render('collapse');
                                    }
                                });
                            });
                        }
                    });
                });
            }
        }

        var myCustomerTable;
        var renderTable = function() {
            myCustomerTable = lig.table({
                elem: '[lay-filter="lig-myCustomer-table"]',
                url: 'bu/customer/myCustomer',
                cols: [[
                    { title: '操作', toolbar: '#tpl-myCustomer-table-row-toolBar', align: 'left', width: 140},
                    { title: '公司', field: 'name', minWidth: 160 },
                    { title: '法人', field: 'legal', width: 100 },
                    { title: '状态', field: 'statusName', width: 100 },
                    { title: '微信', field: 'wxNumber', width: 60, align: 'center'},
                    { title: '业务员', field: 'salesName', width: 100 },
                    { title: '行业', field: 'industry', width: 140 },
                    { title: '待跟进时间', field: 'statusTime', minWidth: 100, templet: '<div>{{ layui.lig.toDateString(d.followTime, "yyyy-MM-dd") }}</div>', },
                    { title: '状态更改时间', field: 'statusTime', minWidth: 120, templet: '<div>{{ layui.util.toDateString(d.statusTime, "yyyy-MM-dd HH:mm:ss") }}</div>', }
                ]],
                done: function (res, curr, count) {
                    tableDone(res, curr, count);
                }
            },{
                mode:'dialog',
                entity: 'myCustomer',
                primaryField: 'id',
                addContent: $('#tpl-myCustomer-add').html(),
                addUrl: 'bu/customer/add',
                addTitle: '添加客户',
                area: ['50%', 'auto'],
                onAddOpened: function() {
                    //var _saveForm = '[lay-filter="lig-saveForm"]';
                    //lig.loadSelectDict('bu_myCustomer_status', _saveForm + ' select[name="status"]');

                    // $('[lay-filter="lig-myCustomer-tel-add"]').click(function () {
                    //     renderAddTel();
                    // });
                    // renderSetLegalTel();
                    // renderCancelLegalTel();
                    // renderDelTel();
                },

                detailContent: $('#tpl-myCustomer-detail').html(),
                onDetailOpened: function() {
                    var detailForm = '[lay-filter="lig-detailForm"]';

                    element.render('collapse');
                },

                modifyTitle: '编辑客户',
                modifyUrl: 'bu/customer/modify',
                modifyContent: $('#tpl-myCustomer-modify').html(),
                onModifyOpened: function() {
                    var _saveForm = '[lay-filter="lig-saveForm"]';
                    lig.loadSelectDict('bu_customer_status', _saveForm + ' select[name="status"]', true);

                    renderSetLegalTel();
                    renderCancelLegalTel();
                    renderWaitTel();

                    initStatus = $(_saveForm + ' select[name="status"]').attr('lay-data');

                    laydate.render({
                        elem: _saveForm + ' input[name="followTime"]'
                    });

                    form.on('checkbox(lig-notFollow)', function(data){

                      if (data.elem.checked) {
                        $(_saveForm + ' input[name="followTime"]').val('');
                        $(_saveForm + ' input[name="followTime"]').attr('disabled', true);
                        $(_saveForm + ' input[name="followTime"]').addClass('layui-disabled');
                      } else {
                        $(_saveForm + ' input[name="followTime"]').attr('disabled', false);
                        $(_saveForm + ' input[name="followTime"]').removeClass('layui-disabled');
                      }
                    }); 
                },
                onSave: function(data) {
                    var tels = [], isSetLegal = false;
                    $('.myCustomer-tels > tr').each(function () {
                        var $this = $(this);
                        var telNumber = $this.find('input[name="telNumber"]').val();
                        if (telNumber == '') {
                            return true;
                        }
                        var isLegal = $this.find('input[name="isLegal"]').val();
                        if (!isSetLegal) {
                            isSetLegal = isLegal == '1' ? true : false;
                        }
                        tels.push({telNumber: telNumber, isLegal: isLegal, isInvalid: $this.find('input[name="isInvalid"]').val()});
                    });

                    if (data.status == '01001' && tels.length > 0 && !isSetLegal) {
                        lig.alert('请设置法人电话');
                        return false;
                    }

                    data.tels = JSON.stringify(tels);
                    return data;
                },
                getUrl: 'bu/customer/{id}'
            });
        }


        form.render();
        lig.ajaxget({
            url: 'setting/dict/list/constant/bu_customer_status',
            success: function (result) {
                if (result.data) {
                    var defStatus = '';
                    $.each(result.data, function (i, _it) {
                        var thisClass = '';    
                        if (i == 0) {
                            thisClass = 'class="layui-this"';
                            defStatus = _it.dictCode;
                        }
                        $('[lay-filter="lig-myCustomer-status-tab"]').find('ul').append('<li ' + thisClass + ' data-status="' + _it.dictCode + '">' + _it.dictName + '</li>');
                    });
                    $('[lay-filter="lig-myCustomer-searchform"] input[name="status"]').val(defStatus);
                    renderTable();
                }
            }
        });

        

        element.on('tab(lig-myCustomer-status-tab)', function(data){
            $('[lay-filter="lig-myCustomer-searchform"] input[name="status"]').val($(this).attr('data-status'));
            myCustomerTable.reloadTable({done: tableDone});
        });

        $('[lay-filter="lig-myCustomer-excel"]').click(function() {
            lig.export('[lay-filter="lig-myCustomer-searchform"]', 'bu/customer/myCustomer/excel');
        });
    })
</script>